<template>
  <div class="m-show-image-wp">
  	<div class="img-box" :style="{
  		backgroundImage: `url(${props.src})`, 
  		width: props.width, 
  		height: props.height
  	}">
			<div v-if="props.src" class="t-mark">
				<div @click="_d.visible = true">
					<EyeOutlined />
					<span>预览</span>
				</div>
			</div>
			<div v-else class="empty">暂无图片</div>
  	</div>

  	<div style="display: none;">
  		<a-image
	      :preview="{ visible: _d.visible, onVisibleChange: val => _d.visible = val }"
	      :src="props.src"/>
  	</div>
  </div>
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import {EyeOutlined} from "@ant-design/icons-vue"

	const props = defineProps({
		src: {
			type: String,
			default: ''
		},
		width: {
			type: String,
			default: '200px'
		},
		height: {
			type: String,
			default: '200px'
		}
	})

	const _d = reactive({
		visible: false
	})

	onMounted(() => {
		
	})

</script>

<style lang="less" scoped>
.m-show-image-wp {
	display: inline-block;
	.img-box {
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		border: 1px dashed #ddd;
	}
	.t-mark {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background: rgba(0,0,0,.5);
		cursor: pointer;
		opacity: 0;
		transition: opacity .3s;
		&:hover {
			opacity: 1;
		}
		span {
			margin-left: 4px;
		}
	}
	.empty {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ccc;
	}
}
</style>